<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div-nav:hover {
				color: #FF0000;
			}
			
			.div-nav:hover>.myUl {
				display: inline-block
			}
			
			.div-nav {
				display: inline-block;
				width: 100px;
				text-align: center;
				height: 40px;
				line-height: 40px;
				position: relative;
			}
			
			.div-nav>span {
				display: inline-block;
				width: 100px;
				height: 40px;
			}
			
			.myUl {
				display: none;
				width: 85px;
				position: absolute;
				top: 20px;
				left: 0px;
				padding: 0px;
			}
			
			.myUl>li {
				padding: 0px;
				list-style: none;
				color: #000000;
			}
			
			.myUl>li:hover {
				background-color: #00FF00;
				color: #FFFFFF;
			}

		</style>
	</head>
	<body>
		<nav>
			<div class="div-nav">
				<span>二次元区</span>
				<ul class="myUl">
					<li>动漫</li>
					<li>游戏</li>
				</ul>
			</div>
			<div class="div-nav">鬼畜区</div>
			<div class="div-nav">新闻联播</div>	
		</nav>
	</body>
</html>
